<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet">
    <script src="./vue.js"></script>
    <style>
        #app .bg-danger{
            background:rgb(240, 175, 138);
        }
        #app .bg-success{
            background:rgb(133, 184, 67);
        }
        .ani-enter{
        opacity: 0;
        transform:translateX(-400px) rotate(360deg);
        }
        .ani-enter-active,.ani-leave-active{
        transition:all 1s;
        }
        .ani-leave-to{
        opacity: 0;
        transform:translateY(400px) scale(0.1);
        }
    </style>
</head>
<body>
    <div id="app" class="wrap center-block" style="max-width: 600px;padding:15px;border:1px solid #333">
        <div class="top" >
            <div class="row">
                <div class="col-md-10">
                    <input type="text" v-model.trim="inputTxt" class="form-control">
                </div>
                <div class="col-md-2">
                    <button @click="addTodo" class="btn btn-primary">增加</button>
                </div>
            </div>
        </div>
        <hr>
        <div class="todos">
            <ul class="list-group">
                <li class="list-group-item text-center" v-if="!todoLists.length">
                    暂无代办事项
                </li>
                <transition-group name="ani">
                    <li 
									v-for="(todo,index) in todoLists" 
									:key="index"
									:class="['list-group-item',todo.isCompleted?'bg-success':'bg-danger']">
                        <p>
                        {{ todo.content }}
                        </p>
                        <button 
                                                @click="changeTodoState(index)"
                                                :disabled="todo.isCompleted"
                                                class="btn btn-success btn-sm">点击完成</button>
                        <button 
                        @click="delTodo(index)"
                        class="btn btn-danger btn-sm">删除</button>
                    </li>
                </transition-group>  
            </ul>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",

            data: {
                inputTxt: "", // 文本框输入的值 
                todoLists: [
                ]
            },
            methods: {
                addTodo () {
                    // 拿到 inputTxt 插入 todoLists
                    if(this.inputTxt){
                        // 判断不为空
                        this.todoLists.push({
                            content:this.inputTxt,
                            isCompleted: false
                        })
                        this.inputTxt = "";
                    }
                },
                changeTodoState (index) {
                    // 改变留言的状态
                    
                    this.todoLists[index].isCompleted = true;
								},
								delTodo (index) {
									// 删除
									if(confirm("确认删除吗？")){
										this.todoLists.splice(index,1)
									}
								}
            }
        })
       
    </script>
</body>
</html>
